<template>
  <div class="container">
    <el-row style="height: 100%">
      <el-col :span="6" class="border-radius">
        <div class="left">
          <label class="label">工作票类型</label>
          <baseTable
            :class="{
              'work-type': true,
              'show-item': showItem,
            }"
            :tableSetting="tableConfig"
            ref="table"
          ></baseTable>
        </div>
      </el-col>
      <el-col :span="18" class="border border-radius">
        <div class="right">
          <label class="label">安全措施项</label>
          <div class="button-action">
            <el-tooltip
              effect="dark"
              content="未授权的功能"
              :disabled="this.$store.getters.isBtnAuth('add')"
              :placement="'top'"
            >
              <div class="action">
                <el-button
                  size="mini"
                  icon="el-icon-plus"
                  @click="toAdd"
                  v-show="rightForm"
                  :disabled="!this.$store.getters.isBtnAuth('add')"
                  >新建</el-button
                >
              </div>
            </el-tooltip>
          </div>
          <div>
            <baseTable
              @saveData="saveData"
              :tableSetting="tableSetting"
              ref="tableParam"
            ></baseTable>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
  addOrUpdateInfo,
  deleteInfo,
  queryList,
} from "@/api/businessConfigurationManagement/securityMeasuresConfiguration.js";
export default {
  data() {
    return {
      ticketType: "", // 工作票类型
      showItem: false,
      rightForm: false, // 右侧数据
      tableConfig: {
        indexShow: true, // 序号显示
        maxHeight: 640,
        column: [
          {
            label: "工作票类型",
            prop: "label",
            required: true,
            showTooltip: false,
          },
        ],
        data: [],
        rowClick: (row) => {
          this.showItem = false;
          this.ticketType = row.value;
          this.getTableData(row.value);
          this.rightForm = true;
        },
      },
      tableSetting: {
        indexShow: true, // 序号显示
        maxHeight: 640,
        column: [
          {
            label: "安全措施项",
            prop: "item",
            type: "textarea",
            required: true,
          },
          {
            label: "是否必填",
            prop: "requiredFlag",
            type: "switch",
            width: "160px",
          },
          {
            label: "操作",
            type: "button",
            scopeType: "textButton",
            width: "300px",
            buttonArr: [
              {
                text: "删除",
                icon: "icon-shanchu",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  this.delete(row);
                },
              },
              {
                text: "上移",
                icon: "icon-shangyi",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  this.saveData(row, "UP");
                },
              },
              {
                text: "下移",
                icon: "icon-xiayi",
                isShow: () => {
                  return true;
                },
                methods: (row) => {
                  this.saveData(row, "DOWN");
                },
              },
            ],
          },
        ],
        data: [],
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.$set(
        this.tableConfig,
        "data",
        this.$store.getters["dirtData"]("work_ticket_security_measures")
      );
      this.tableConfig.rowClick(
        this.$store.getters["dirtData"]("work_ticket_security_measures")[0]
      );
      this.showItem = true;
    },
    //新增配置项
    toAdd() {
      this.$refs.tableParam.pushData([{}]);
    },
    // 输入框失去焦点
    async saveData(row, type) {
      let data = Object.assign({}, row, {
        ticketType: this.ticketType,
        sortType: type,
      });
      await addOrUpdateInfo(data).then((res) => {
        if (res.code == 200) {
          // this.$message.success(res.description);
          this.$message.success("保存成功！");
          this.getTableData(this.ticketType);
        }
      });
    },
    //删除配置项详情
    delete(row) {
      this.$confirm("确定要删除这条数据吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let data = { id: row.id };
        deleteInfo(data).then((res) => {
          if (res.code == 200) {
            // this.$message.success(res.description);
            this.$message.success("删除成功！");
            this.getTableData(row.ticketType);
          }
        });
      });
    },
    // 获取右侧信息
    async getTableData(type) {
      let queryData = { ticketType: type };
      let { data } = await queryList(queryData);
      this.$set(this.tableSetting, "data", data);
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  background: #f2f3f8;
  .border-radius {
    height: 100%;
  }
  .border {
    border-left: 15px #f2f3f8 solid;
  }
  .label {
    display: block;
    padding: 0 5px 10px 5px;
    border-bottom: 1px #ccc solid;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #303133;
  }
  .left {
    background: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 8px;
    .work-type {
      margin-top: 20px;
    }
    /deep/ .show-item tbody .el-table__row:first-child {
      background: #eaf4ff;
    }
  }
  .right {
    background: #fff;
    width: 100%;
    padding: 20px;
    border-radius: 8px;
    height: 100%;
  }
  .button-action {
    display: flex;
    justify-content: flex-end;
    .action {
      display: inline-block;
      margin-top: 10px;
      text-align: right;
    }
  }
  .el-button--primary {
    background-color: @kr-main-color;
    border-color: @kr-main-color;
  }
  .form {
    width: 450px;
    margin: 0 auto;
    padding: 25px 0;
  }
}
</style>